/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  SectionList,
} from 'react-native';

import Screen from './HomeScreen.js';
import SlideShowView from './SlideShowView.js';
import SectionHeaderView from './HomeSectionHeaderView.js';
import SectionFooterView from './HomeSectionFooterView.js';

let fmRecommendGapWidth = (Screen.width-65*4)/5;

export default class MoreFMView extends Component {
  static navigationOptions = ({navigation}) => ({
    headerLeft: (
      <TouchableOpacity
        onPress = {() => navigation.goBack()}
      >
        <Image
          style = {{width:24, height:24, marginLeft:10}}
          source = {require('../../img/homeImg/back.png')}
        />
      </TouchableOpacity>
    ),
    headerRight: (
      <TouchableOpacity
        //  onPress = {() => this.props.navigation.goBack()}
      >
        <Image
          style = {{width:17, height:17,marginRight:10}}
          source = {require('../../img/homeImg/littlePlaying1.png')}
        />
      </TouchableOpacity>
    ),

    headerTitle:navigation.state.params.info.name,
    headerStyle:{ backgroundColor: 'white' }
  })

  constructor(props){
    super(props);

    this.state = {
      sectionListData:[],
      slideShowData:[],
    };

    this._url = this.props.navigation.state.params.info.url;
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData(){
    let map = {
      method:'GET'
    }
    fetch(this._url, map)
      .then((response) => response.json())
      .then((responseData) => {
      //  console.log(responseData);
        let jsonData = responseData.data;
        // console.log(jsonData);
        var initialArr = [
                          {key:'新晋主播', data:jsonData.newlist, footTitle:'更多主播'},
                          {key:'热门主播', data:jsonData.hotlist, footTitle:''},
                        ];
        this.setState({
          slideShowData:jsonData.tuijian,
          sectionListData:initialArr,
        })
      })
      .catch((error) => {
        console.log(error);
        alert('失败');
      })
  }

  render() {
    return (
      <View style = {{backgroundColor:'rgb(242,242,242)'}}>
        <SectionList
          ListHeaderComponent = {this._listHeaderComponent}
          renderSectionHeader = {this._renderSectionHeader}
          renderSectionFooter = {this._renderSectionFooter}
          keyExtractor = {this._keyExtractor}
          sections = {[
            {
              data:this.state.sectionListData[0] && this.state.sectionListData[0].data ? this.state.sectionListData[0].data:[],
              key:this.state.sectionListData[0]&& this.state.sectionListData[0].key?this.state.sectionListData[0].key:'',
              footTitle:this.state.sectionListData[0]&& this.state.sectionListData[0].footTitle?this.state.sectionListData[0].footTitle:'',
              renderItem:this._renderNewZhuBoItem
            },
            {
              data:this.state.sectionListData[1] && this.state.sectionListData[1].data ? this.state.sectionListData[1].data:[],
              key:this.state.sectionListData[1]&& this.state.sectionListData[1].key?this.state.sectionListData[1].key:'',
              footTitle:this.state.sectionListData[1]&& this.state.sectionListData[1].footTitle?this.state.sectionListData[1].footTitle:'',
              renderItem:this._renderHotZhuBoItem
            },
          ]}
          contentContainerStyle = {styles.cellStyle}

          stickySectionHeadersEnabled = {false}
          style = {{backgroundColor:'#ffffff'}}
          //numColumns = {4}
          // showsVerticalScrollIndicator = {false}
        />
      </View>
    );
  }

  _listHeaderComponent = () => {
    return(
      <SlideShowView
        slideShowData = {this.state.slideShowData}
      />
    );
  }

  _renderSectionHeader = ({section}) => {
    return(
      <SectionHeaderView
        headerTitle = {section.key}
      />
    );
  }

  _renderSectionFooter = ({section}) => {
    return(
      <SectionFooterView
        footerTitle = {section.footTitle}
      />
    );
  }

  _renderNewZhuBoItem = ({item, index}) => {
    return(
      <View style = {{width:65, backgroundColor:'#ffffff', alignItems:'center', marginLeft:fmRecommendGapWidth}}>
        <Image
          style = {{width:65, height:65, borderRadius:32}}
          source = {{uri: item.cover}}
        />
        <Text style = {{width: 60, color:'gray', marginTop:10, marginBottom:15, fontSize:11, textAlign:'center'}}>
          {item.title}
        </Text>
      </View>
    );
  }

  _renderHotZhuBoItem = ({item, index}) => {
    return(
      <View style = {{width:Screen.width, height:75}}>
        <View style = {{width:Screen.width, flexDirection:'row', height:74}}>
          <Image
            source = {{uri:item.cover}}
            style = {{width:40, height:40, marginLeft:10, marginTop:13, borderRadius:20}}
          />
          <View style = {{marginLeft:12, width:Screen.width-72}}>
            <View style = {{flexDirection:'row', justifyContent:'space-between'}}>
              <Text style = {{color:'rgb(84,84,84)', fontSize:15, marginTop:13}}>{item.title}</Text>
              <Text style = {{color:'rgb(176,175,176)', marginTop:13, fontSize:13}}>{'节目  ' + item.fmnum}</Text>
            </View>
            <View style = {{marginTop:8}}>
              <Text
                numberOfLines = {2}
                style = {{color:'rgb(176,175,176)', fontSize:13, }}
              >{item.content}</Text>
            </View>
          </View>
        </View>

        <View style = {{backgroundColor:'rgb(231,231,231)', marginHorizontal:10, height:1, bottom:0}}>

        </View>
      </View>
    );
  }

  _keyExtractor = (item, index) => {
    return item.id;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  cellStyle:{
    flexDirection:'row',
    flexWrap:'wrap',
  },
});
